/*
 * @Author: HuangYue
 * @Date: 2022-05-08 17:50:56
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-09 15:48:37
 * @FilePath: /graduation/src/components/DeviceDetail/DeviceVisualization/components/Gauge/index.jsx
 * @Description:
 */
import React, { useState, useEffect, useRef } from 'react';
import { Gauge } from '@ant-design/plots';

const DemoGauge = ({ data }) => {
  const ticks = [0, 1 / 3, 2 / 3, 1];
  const color = ['#F4664A', '#FAAD14', '#30BF78'];
  const graphRef = useRef(null);
  const config = {
    height: 200,
    percent: data,
    innerRadius: 0.75,
    type: 'meter',
    // 自定义 meter 总步数 以及 step 占比
    meter: {
      steps: 50,
      stepRatio: 0.6,
    },
    range: {
      ticks: [0, 1],
      color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
    },
    indicator: {
      pointer: {
        style: {
          stroke: '#D0D0D0',
        },
      },
      pin: {
        style: {
          stroke: '#D0D0D0',
        },
      },
    },
    statistic: {
      title: {
        formatter: ({ percent }) => {
          if (percent < ticks[1]) {
            return '差';
          }

          if (percent < ticks[2]) {
            return '中';
          }

          return '优';
        },
        style: ({ percent }) => {
          return {
            fontSize: '30px',
            lineHeight: 1,
            color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
          };
        },
      },
      content: {
        offsetY: 36,
        style: {
          fontSize: '20px',
          color: '#4B535E',
        },
        formatter: () => '网络质量',
      },
    },
    onReady: (plot) => {
      graphRef.current = plot;
    },
  };

  return <Gauge {...config} />;
};

export default DemoGauge;
